<template>
  <div>词语小游戏~</div>
  <div>
    <div>
      我的游玩次数: {{ myinfo.times }}，最高{{ myinfo.score }}分
      排行榜，游玩次数：{{ myinfo.idiomRank?.times }},
      高分榜：{{ myinfo.idiomRank?.score }}分
    </div>
    {{ idiom_data }}
    <hr />
    <div v-if="idiom_data.idiom">
      <!-- <div>{{ idiom_data.idiom }}关</div> -->
      <div>
        <span> {{ idiom_data.idiom.substring(0, idiom_data.index) }}</span>
        <span>_</span>
        <span> {{ idiom_data.idiom.substring(idiom_data.index) }}</span>
      </div>
      <div class="demo-progress">
        <el-progress :percentage="50" />
        <el-progress :percentage="100" :format="format" />
        <el-progress :percentage="100" status="success" />
        <el-progress :percentage="100" status="warning" />
        <el-progress :percentage="50" status="exception" />
      </div>
      <hr />
      {{ idiom_data.results.split('') }}
      <div>
        <el-button
          @click="idiom_answer(d)"
          :disabled="isAnswerDisabled"
          type="primary"
          v-for="d in idiom_data.results.split('')"
        >
          {{ d }}
        </el-button>
      </div>
      <div v-if="timeLeft > 0">
        剩余时间：{{ timeLeft }} 秒
      </div>
      <hr />
      {{ idiom }}
    </div>
    <el-button type="primary" @click="get_idiom"> 获取词语 </el-button>
  </div>
  <hr />
  <div v-for="d in slist">
    {{ d.user.tbUser.username }}
    最高得分：{{ d.score }},游玩次数{{ d.times }},
  </div>
  <hr />
  <div v-for="d in alist">
    {{ d.user.tbUser.username }}
    最高得分：{{ d.score }},游玩次数{{ d.times }},
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { Api } from '../../script/Api';
import { ElMessage } from 'element-plus';

const format = (percentage: number) => (percentage === 100 ? 'Full' : `${percentage}%`);

const idiom_data = ref({});

const idiom = ref({});
const timeLeft = ref(10);

const isAnswerDisabled = ref(false);

let countdownId: NodeJS.Timeout | null = null;

const startCountdown = () => {
  countdownId = setInterval(() => {
    timeLeft.value--;
    if (timeLeft.value <= 0) {
      clearInterval(countdownId!);
      countdownId = null;
      isAnswerDisabled.value = true;
      ElMessage.warning('答题时间到，游戏结束');
    }
  }, 1000);
};

const resetCountdown = () => {
  timeLeft.value = 10;
  isAnswerDisabled.value = false;
  if (countdownId) {
    clearInterval(countdownId);
    countdownId = null;
  }
};

const get_idiom = () => {
  resetCountdown();
  idiom.value = {};
  Api.get('/games/idiom', {}, (data) => {
    if (data.success) {
      idiom_data.value = data.data;
      startCountdown();
    } else {
      ElMessage.error(data.message);
    }
  });
};

const idiom_answer = (answer) => {
  if (!isAnswerDisabled.value) {
    Api.post('/games/idiom', { answer: answer }, (data) => {
      idiom.value = data.data;
      if (data.success) {
        ElMessage.success(data.message);
        resetCountdown();
      } else {
        ElMessage.error(data.message);
      }
    });
  }
};

const slist = ref([]);
const alist = ref([]);
const myinfo = ref({});

const query = () => {
  Api.get('/games/idiom/1/10/2', {}, (data) => {
    slist.value = data.data.data;
  });

  Api.get('/games/idiom/1/10/2', {}, (data) => {
    alist.value = data.data.data;
  });

  Api.get('/games/idiom/my', {}, (data) => {
    myinfo.value = data.data;
  });
};

onMounted(() => {
  query();
});

onBeforeUnmount(() => {
  if (countdownId) {
    clearInterval(countdownId);
    countdownId = null;
  }
});
</script>

<style scoped>
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
</style>